<div class="overlay" *ngIf="showDropdown" (click)="showDropdown = false"></div>
<div class="dcm_dropdown" [ngClass]="{'single_mode':!multiSelectMode}">
  <div class="dropdown_input" (click)="toggleDropdown()">
    <div class="input_part">
        <!--<pre style="position:fixed;right:10px;width:70%;top:40px;z-index: 9999999;height: 200px;">{{selectedDropdown|json}}</pre>-->
      <ng-container *ngIf="multiSelectMode">
        <div class="selected_value" *ngIf="multiSelectValue.length > 0 && multiSelectValue.length <= maxSelectedValueShown">{{multiSelectValue | arrayToString:', '}}</div>
        <div class="selected_value" *ngIf="multiSelectValue.length > maxSelectedValueShown">( {{multiSelectValue.length}} ) selected</div>
        <div class="selected_value" *ngIf="multiSelectValue.length === 0">{{placeholder}}</div>
      </ng-container>
      <ng-container *ngIf="!multiSelectMode && (selectedValue && selectedDropdown)">
        <div class="selected_value" *ngIf="!(selectedDropdown && selectedDropdown.htmlLabel) && !editable">{{selectedDropdown.label || selectedDropdown.text || selectedDropdown.value}}</div>
        <div class="selected_value" *ngIf="selectedDropdown && selectedDropdown.htmlLabel" [innerHTML]="selectedDropdown.htmlLabel"></div>
      </ng-container>
        <input class="edited_input_value" *ngIf="!(selectedDropdown && selectedDropdown.htmlLabel) && editable" title="{{placeholder}}" min="{{min}}" max="{{max}}" [(ngModel)]="selectedValue" (keyup)="inputChangedManually($event)">
      <div *ngIf="!(selectedValue && selectedDropdown) && !multiSelectMode && !editable" class="selected_value empty_field">{{placeholder}}</div>
    </div>
    <span class="glyphicon glyphicon-triangle-bottom"></span>
  </div>
  <div class="select" [@showHide]="showDropdown ? 'show':'hide'" >
    <div action="" class="search_block" *ngIf="showSearchField">
      <input type="checkbox" *ngIf="multiSelectMode" [(ngModel)]="isAllCheck" (change)="allChecked($event)">
      <input type="text" [ngClass]="{'single_input':!multiSelectMode}" i18n-placeholder="@@search" placeholder="Search" [(ngModel)]="search">
    </div>
      <ul *ngIf="!mixedMode" class="option_block">
          <li *ngIf="showStar" class="option" (click)="select('')">&nbsp;</li>
          <ng-container *ngIf="options && !optionsTree; else treeMode">
              <li class="option" (click)="select(option)" [ngClass]="{'active':option.selected}" title="{{option.title || ''}}" *ngFor="let option of options|search:search">
                  <input type="checkbox" *ngIf="option.value && option.value != '' && multiSelectMode" [(ngModel)]="option.selected">
                  <div class="dcm_input_value" [ngClass]="{'with_checkbox':multiSelectMode}" *ngIf="option.htmlLabel" [innerHTML]="option.htmlLabel"></div>
                  <div class="dcm_input_value" [ngClass]="{'with_checkbox':multiSelectMode}" *ngIf="!option.htmlLabel">
                      {{option.text || option.value || option.label}}
                  </div>
              </li>
              <li class="option" *ngIf="!options || options.length === 0" (click)="select('')">
                 <div class="dcm_input_value" i18n="@@no_elements_found">
                  No Elements found
                 </div>
              </li>
          </ng-container>
          <ng-template #treeMode>
              <div class="tree_block" *ngFor="let group of optionsTree">
                  <label class="tree_label" *ngIf="group.label && group.label != ''">{{group.label}}</label>
                  <li class="option" (click)="select(option)" [ngClass]="{'active':option.selected,'tree':(group.label && group.label != '')}" title="{{option.title || ''}}" *ngFor="let option of group.options|search:search">
                      <input type="checkbox" *ngIf="option.value && option.value != '' && multiSelectMode" [(ngModel)]="option.selected">
                      <div class="dcm_input_value" [ngClass]="{'with_checkbox':multiSelectMode}" *ngIf="option.htmlLabel" [innerHTML]="option.htmlLabel"></div>
                      <div class="dcm_input_value" [ngClass]="{'with_checkbox':multiSelectMode}" *ngIf="!option.htmlLabel">
                          {{option.text || option.value || option.label}}
                      </div>
                  </li>
                  <li class="option" *ngIf="!group || group.length === 0" (click)="select('')">
                      <div class="dcm_input_value" i18n="@@no_elements_found">
                          No Elements found
                      </div>
                  </li>
              </div>
          </ng-template>
      </ul>
  </div>
</div>